<template>
	<view class="container">
		<image src="../../../static/images/share/share_list_banner.png" mode="" class="share_list_banner"></image>
		<view class="share_list">
			<view class="share_item" v-for="(item, index) in share_list" :key='index'>
				<image src="../../../static/images/share/share_click.png" mode="" class="share_click"></image>
				<image src="../../../static/images/share/share_icon.png" mode="" class="share_icon" @tap="showShare(index)"></image>
				<view class="share_detail">
					<image :src="item.goods_img" mode="" class="share_product"></image>
					<view class="share_detail_r">
						<view class="share_detail_text">助力可<text class="for_free">免费拿</text></view>
						<view class="progress">
							<view class="progress_on" :style="{width: item.share_persent}"></view>
						</view>
						<view class="progress_num">
							<view class="progress_begin">
								0
							</view>
							<view class="progress_end">
								<view class="progress_now">
									{{item.share_money}}
								</view>
								<view class="progress_end">
									{{item.share_total_money}}
								</view>
							</view>
						</view>
						<view class="click_list">
							<view class="user_list">
								<view class="user">
									<image src="../../../static/images/share/head_img.png" mode="" class="user_img"></image>
									<view class="user_name">筱^^已助力</view>
								</view>
								<view class="user">
									<image src="../../../static/images/share/head_img.png" mode="" class="user_img"></image>
									<view class="user_name">筱^^已助力</view>
								</view>
								<view class="user">
									<image src="../../../static/images/share/head_img.png" mode="" class="user_img"></image>
									<view class="user_name">筱^^已助力</view>
								</view>
							</view>
							<!-- <view class="getgift">
								去免费领
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 分享弹框 -->
		<view class="g-popup-share" :class="{zShow:isShowShare}">
			<view class="g-share-type">
				<button @tap="share('WXSceneSession')">
					<image src="../../../static/icons/wxpay.png" mode="widthFix"></image>
					<view>微信好友</view>
				</button>
				<button @tap="share('WXSenceTimeline')">
					<image src="../../../static/icons/weixin_friend.png" mode="widthFix"></image>
					<view>朋友圏</view>
				</button>
			</view>
			<button class="u-share-cancel" @tap="showToggle()">取消</button>
		</view>
		<view class="u-popup-mask" v-if="isShowMark" @tap="showToggle()"></view>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
		<mix-load-more :status="loadMoreStatus"></mix-load-more>
	</view>
</template>

<script>
	import jewel from '@/common/common_zb.js';
	export default{
		data() {
			return {
				share_list: [],
				isShowShare: false,
				isShowMark: false,
				bIsShowLoading: false,
				current_key: 0,
				page: 1,
				pageCount: 1,
				loadMoreStatus:1,
			}
		},
		onLoad(data) {
			let that = this;
			this.getShareList();
		},
		methods: {
			getShareList(type = 'normal') {
				let that = this;
				that.loadMoreStatus = 1
				jewel.post('order/share_order', {page: that.page}, false, function(res) {
					if(type == 'normal') {
						that.share_list = res.data.data;
						that.loadMoreStatus = that.pageCount <= 1?3:0
					}else{
						that.share_list = that.share_list.concat(res.data.data)
					}
					that.pageCount = res.data.total_pages;
					uni.stopPullDownRefresh()
				})
			},
			showShare(current_key){
				this.isShowShare = true;
				this.isShowMark = true;
				this.current_key = current_key;
			},
			//上滑加载
			onReachBottom() {
				if(this.page+1 <= this.pageCount) {
					this.page++;
					this.getShareList('add');
				}else{
					that.loadMoreStatus = 2
				}
			},
			share(wx) {
				let that = this
				that.isShowLoading = true;
				var share = this.share_list[this.current_key].share_url;
				uni.share({
				    provider: 'weixin',
				    scene: wx,
				    type: 0,
				    href: share.url,
				    title: share.title,
				    summary: share.summary,
				    imageUrl: share.imageUrl,
				    success: function(res) {
						that.isShowLoading = false
					},
				    fail: function(err) {
						that.isShowLoading = false
					}
				});
				setTimeout(()=>{
					that.showToggle();
				},3000)
			},
			showToggle() {
				this.isShowMark = !this.isShowMark
				this.isShowShare = !this.isShowShare
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color: #f8f8f8;
		width: 100%;
		height: 100%;
	}
	.share_list_banner{
		width: 100%;
		height: 214rpx;
	}
	.share_list{
		width: 90%;
		height: 100%;
		margin: 0 auto;
		margin-top: 25rpx;
	}
	.share_item{
		height: 306rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 23rpx;
	}
	.share_click{
		width: 140rpx;
		height: 32rpx;
		float: left;
	}
	.share_icon{
		float: right;
		width: 50rpx;
		height: 50rpx;
		position: relative;
		right: 10rpx;
		top: 13rpx;
	}
	.share_detail{
		width: 656rpx;
		height: 100%;
		margin: 0 auto;
		clear: both;
	}
	.share_product{
		width: 192rpx;
		height: 232rpx;
		float: left;
		border: 1rpx solid #ccc;
		border-radius: 6rpx;
		margin-right: 26rpx;
	}
	.share_detail_r{
		float: left;
		height: 232rpx;
	}
	.share_detail_text{
		font-size: 30rpx;
		height: 48rpx;
		width: 100%;
	}
	.for_free{
		color: #c82723;
	}
	.progress{
		width: 410rpx;
		height: 20rpx;
		background-color: #fdd0d0;
		border-radius: 20rpx;
		margin-top: 2rpx;
	}
	.progress_on{
		width: 30%;
		height: 100%;
		background-color: #d71311;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.progress_num{
		height: 46rpx;
		width: 100%;
		overflow: hidden;
		font-size: 28rpx;
		line-height: 46rpx;
		margin-top: 6rpx;
	}
	.progress_begin{
		float: left;
		width: 50%;
	}
	.progress_end{
		float: left;
		width: 50%;
	}
	.progress_now{
		float: left;
		color: #b70d0b;
	}
	.progress_end view{
		width: 50%;
	}
	.progress_end{
		float: right;
		color: #4c4c4c;
		text-align: right;
	}
	.click_list{
		height: 125rpx;
		width: 100%;
		position: relative;
	}
	.user_list{
		width: 50%;
		float: left;
		height: 122rpx;
	}
	.getgift{
		float: left;
		width: 160rpx;
		height: 47rpx;
		background-color: #c82723;
		color: #fff;
		font-size: 28rpx;
		border-radius: 25rpx;
		text-align: center;
		line-height: 47rpx;
		position: absolute;
		bottom: 16rpx;
		right: 0;
	}
	.user{
		height: 34rpx;
		width: 100%;
		margin-bottom: 9rpx;
	}
	.user_img{
		height: 34rpx;
		width: 34rpx;
		border-radius: 50rpx;
		float: left;
		margin-right: 12rpx;
	}
	.user_name{
		font-size: 24rpx;
	}
	.g-popup-share {
	    position: fixed;
	    left: 0;
	    bottom: -100%;
	    width: 100%;
	    background: #fff;
	    z-index: 11;
		transform: translateY(100%);
		transition: .3s;
		.g-share-type {
		    display: flex;
		    padding: 15px 0;
			button {
			    flex: 1;
			    text-align: center;
			}
			image {
			    width: 75upx;
				height: 75upx;
			}
		}
		.u-share-cancel {
		    background: #a4a4a4;
		    padding: 10px 0;
		    color: #fff;
		
		}
		
	}
	
	.zShow {
		transform: translateY(0) !important;
		bottom: 0;
	}
	.u-popup-mask {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100vw;
	    height: 100vh;
	    background: rgba(0, 0, 0, .5);
	    z-index: 10;
	}
</style>
